<script lang="ts">
	import { Any } from '$lib/api/proto/google/protobuf/any';
	import { AddRequest } from '$lib/api/proto/roadmap_data_state_api';
	import { LEARN_LEVEL, LearnState, TextState } from '$lib/api/proto/roadmap_data_type_api';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { roadmapStore } from '../store.svelte';
	import EditorJS from '@editorjs/editorjs';

	interface Props {
		nodeId: string;
		onClose: () => void;
	}
	const props: Props = $props();

	let stateType = $state('text' as 'text' | 'level');
	let textEditor: EditorJS | null = $state(null);
	let learnLevel = $state(LEARN_LEVEL.LEARN_LEVEL_KNOW);

	async function addNodeState() {
		if (userStore.userSession == null) {
			return;
		}
		const req: AddRequest = {
			sessionId: userStore.userSession,
			roadmapId: roadmapStore.roadmapId,
			nodeId: props.nodeId,
			state: undefined
		};

		if (stateType == 'text') {
			if (textEditor == null) {
				return;
			}
			const textData = await textEditor.save();
			req.state = Any.pack(
				{
					content: JSON.stringify(textData)
				},
				TextState
			);
		} else if (stateType == 'level') {
			req.state = Any.pack(
				{
					learnLevel: learnLevel
				},
				LearnState
			);
		}

		const res = await callApi(appStore.roadmapDataStateApiClient.add(req).response);
		await roadmapStore.onAddNodeState(props.nodeId, res.stateId);
		props.onClose();
	}
</script>

<dialog class="modal modal-open">
	<div class="modal-box w-[800px] max-w-none">
		<button
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
			onclick={() => props.onClose()}>✕</button
		>
		<h3 class="text-lg font-bold">增加学习记录</h3>
		<div class="max-h-[60vh] overflow-y-auto pr-[10px] flex-col space-y-4 pt-[20px]">
			<label class="label w-full">
				<span class="label w-[100px] text-right inline-block pr-[10px]">类型:</span>
				<select class="select w-full" bind:value={stateType}>
					<option value="text">学习笔记</option>
					<option value="level">掌握程度</option>
				</select>
			</label>
			{#if stateType == 'text'}
				<h4 class="text-base font-bold">学习笔记</h4>
				<SimpleEditor
					sizeClass="min-h-[300px] border-2 border-base-200 max-h-[300px]"
					placeholder="请输入学习笔记"
					onInit={(tmpEditor) => (textEditor = tmpEditor)}
				/>
			{:else if stateType == 'level'}
				<label class="label w-full">
					<span class="label w-[100px] text-right inline-block pr-[10px]">掌握程度:</span>
					<select class="select w-full" bind:value={learnLevel}>
						<option value={LEARN_LEVEL.LEARN_LEVEL_KNOW}>了解</option>
						<option value={LEARN_LEVEL.LEARN_LEVEL_KNOW_WELL}>熟悉</option>
						<option value={LEARN_LEVEL.LEARN_LEVEL_MASTER}>掌握</option>
						<option value={LEARN_LEVEL.LEARN_LEVEL_SKILLFUL}>精通</option>
					</select>
				</label>
			{/if}
		</div>
		<div class="modal-action">
			<button class="btn" onclick={() => props.onClose()}>取消</button>
			<button class="btn btn-primary" onclick={() => addNodeState()}>增加</button>
		</div>
	</div>
	<div class="modal-backdrop">
		<button onclick={() => props.onClose()}>close</button>
	</div>
</dialog>
